<template>
    <el-container class="layout">
        <el-header>
            <el-row type="flex">
                <el-col class="app-icon">
                    <img src="@/assets/logo.png" alt="app-icon">
                </el-col>
                <el-col>
                    <el-menu
                        default-active="1"
                        mode="horizontal"
                        text-color="#fff"
                        active-text-color="#409eff"
                        background-color="#545c64"
                    >
                        <el-menu-item index="1">首页</el-menu-item>
                        <el-submenu index="2">
                            <template v-slot:title>工作台</template>
                            <el-submenu index="2-4">
                                <template v-slot:title>操作</template>
                                <el-menu-item index="2-4-1">选项1</el-menu-item>
                                <el-menu-item index="2-4-2">选项2</el-menu-item>
                            </el-submenu>
                            <el-menu-item index="2-2">选项1</el-menu-item>
                            <el-menu-item index="2-3">选项2</el-menu-item>
                            <el-menu-item index="2-1" @click="logout">退出登录</el-menu-item>
                        </el-submenu>
                        <el-menu-item index="3" disabled>消息中心</el-menu-item>
                        <el-menu-item index="4">
                            <a 
                                href="https://e3.shengxinjing.cn/#/component/icon" 
                                target="_blank"
                            >官网</a>
                        </el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                    class="el-menu-demo"
                    default-active="home"
                    background-color="#efefef"
                    router
                >
                    <el-menu-item index="home">待办清单</el-menu-item>
                    <el-menu-item index="animation">动画</el-menu-item>
                    <el-menu-item index="about">关于</el-menu-item>
                    <el-menu-item index="chart">图表</el-menu-item>
                    <el-menu-item index="Test">测试</el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
    import { useRouter } from 'vue-router'
    
    const router = useRouter()
    function logout() {
        localStorage.removeItem('token')
        router.push('/login')
    }
</script>

<style lang="less">
    .layout {
        height: 100vh;
        
        .app-icon {
            flex: 0 0 80px;
            display: flex;
            justify-content: center;
            align-items: center;
        
            img {
                width: 40px;
            }
        }
        
        .el-header {
            padding: 0;
            color: #333;
            background-color: #545c64;
        }
        
        .el-aside {
            height: 100%;
        
            .el-menu-demo {
                height: 100%;
            }
        }
        
        .el-main {
            height: 100%;
            color: #333;
        }
    }
</style>
